How to use line based positioning in grid?

To become familiar with line based positioning in grid try to build a few common layouts by placing items onto grids with varying numbers of columns. Remember that if you do not place all of the items, any leftover items will be placed according to auto-placement rules.

How do you position a grid?

Position items by defining their start and end lines. Use shorthand notation. Before we dive straight into positioning, let’s establish some terminology to better understand the different parts of a grid. In the previous lesson you learned that when you define a grid using grid-template, you are defining the tracks the grid will have.

How do I Position Grid items with start and end lines?

But there are other ways to position items and this is where things can get a little confusing. There is an even shorter shorthand for positioning grid items with start and end lines. You can combine grid-row-start / grid-column-start / grid-row-end / grid-column-end into one line using grid-area. Our living room above can be written out like this: